<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.id{
			position: relative;
		}
		.id li{
			position: absolute;
			display: none;
		}
		.an{
			position: absolute;
			top: 300px;
			left: 35%;
		}
		.an li{
			float: left;
			margin-left: 10px;
		width: 20px;
		height: 20px;
		background-color: aqua;
		}
		.zz{
			background-color: black !important;
		}
		.ff{
			display: block !important;
		}
		
	</style>
	<body>
		<div class="id">
			<li class="ff"><img src="../img/3067db89d9f6dc078c4bb221af8efe8.jpg" alt="" ></li>
		<li><img src="../img/a178216b99f69280bd79afa2acad8f9.jpg" alt="" "></li>
		<li><img src="../img/b7d78f60868a336e050cb86e6703744.jpg" alt="" "></li>
		
		</div>
		<ul class="an">
			<li class="zz"></li>
			<li></li>
			<li></li>
		</ul>
	</body>
	<script>
		var id=document.querySelectorAll('.id li')
		console.log(id)
		var an=document.querySelectorAll('.an li')
		
		
		setInterval(function(){
			
			for(var i=0;i<an.length;i++){
				an[i].setAttribute('index',i)
				an[i].addEventListener('click',function(){
					for(var i=0;i<an.length;i++ ){
						an[i].classList=''
						id[i].classList=''
					}
					this.classList='zz';
					var index=this.getAttribute('index');
					console.log(index)
					id[index].classList='ff'
				})
			}
			
			
		},1000)
		
	</script>
</html>